<script setup>
import { ElMessage } from 'element-plus'
import { reactive, useTemplateRef, ref } from 'vue'
import { handleLogger } from '@renderer/util/common'

const show = defineModel('show', { type: Boolean, default: false })
const emits = defineEmits(['success'])

const formRules = {
  name: [{ required: true, message: '请输入等级名称', trigger: 'blur' }]
}
const formState = reactive({
  name: '',
  isDividend: false
})
const formRef = useTemplateRef('formRef')

const ruleList = ref([
  {
    min: '',
    max: '',
    rate: ''
  },
  {
    min: '',
    max: '',
    rate: ''
  }
])
async function handleConfirm() {
  await formRef.value.validate()
  const hasName = await window.api.getDividendByName(0, formState.name)
  if (hasName.length > 0) {
    ElMessage.warning('规则名称已存在')
    return
  }

  const list = ruleList.value.map((item) => {
    return {
      startMoney: Math.floor(item.min),
      endMoney: Math.floor(item.max),
      ration: Math.floor(item.rate)
    }
  })

  const res = await window.api.insertDividend(formState.name, formState.isDividend ? 1 : 0, list)
  console.log(res)
  ElMessage.success('操作成功')
  handleLogger(`创建分红规则：${formState.name}`)
  show.value = false
  emits('success')
}

function handleDel(index) {
  ruleList.value.splice(index, 1)
}
function handleAddRuleItem() {
  ruleList.value.push({
    min: '',
    max: '',
    rate: ''
  })
}
</script>

<template>
  <el-dialog v-model="show" width="700" title="分红规则" draggable>
    <el-form ref="formRef" :model="formState" :rules="formRules" label-width="120px">
      <el-form-item label="分红规则名称" prop="name">
        <el-input v-model="formState.name" placeholder="请输入分红规则名称" />
      </el-form-item>
      <el-form-item label-width="0px">
        <div>
          <div class="list-box">
            <div class="item-box">
              <div class="left-box">业绩区间</div>
              <div class="right-box">分红比例</div>
            </div>
            <div v-for="(item, index) in ruleList" :key="index" class="item-box">
              <div class="left-box">
                <span style="flex-shrink: 0">{{ index + 1 }}级</span>
                <el-input-number
                  v-model="item.min"
                  :min="0"
                  placeholder="输入整数"
                  :controls="false"
                  :value-on-clear="''"
                ></el-input-number>
                <span>-</span>
                <el-input-number
                  v-model="item.max"
                  :min="0"
                  placeholder="输入整数(不含)"
                  :controls="false"
                ></el-input-number>
              </div>
              <div class="right-box">
                <el-input-number
                  v-model="item.rate"
                  :min="0"
                  :max="100"
                  placeholder="输入整数"
                  :controls="false"
                ></el-input-number>
                <span>%</span>
              </div>
              <el-button
                v-if="ruleList.length > 1"
                type="danger"
                link
                class="del-btn"
                @click="handleDel(index)"
                >删除</el-button
              >
            </div>
          </div>
          <el-button type="primary" link @click="handleAddRuleItem">新增</el-button>
        </div>
      </el-form-item>
      <el-form-item label-width="0px">
        <span>是否启用</span>
        <el-switch v-model="formState.isDividend"></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="text-align: center">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.list-box {
  .item-box {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    .left-box {
      flex: 2;
      text-align: center;
      display: flex;
      justify-content: center;
      padding-right: 20px;
    }
    .right-box {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
    }
    .del-btn {
      position: absolute;
      right: -41px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
